<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身-我的</title>
</head>

<body>
    <!-- 主体 -->
    <main>
        <!-- 头像+用户名+个性签名 -->
        <div class="headUser-signature" id="userInfo">
            <!-- 头像+用户名 -->
            <div class="headUser">
                <img src="../../assets/image/头像.png" alt="" id="imgUrl">
                <b class="iconfont icon-vip"></b>
                <span id="nickName">用户名</span>
                <i class="iconfont icon-xiangyou1"></i>
            </div>
            <!-- 个性签名 -->
            <p class="signature" id="sign">个性签名:xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <!-- 个人动态 -->
        <div class="dynamics">
            <p class="personal">
                <img src="../../assets/image/badges.svg" alt=""> 累计签到23天
            </p>
            <p class="row-count">
                <span id="qd">今日签到</span>
                <i class="iconfont icon-xiangyou1"></i>
            </p>
        </div>


        <!-- 个人动态 -->
        <div class="dynamics">
            <p class="personal">
                <img src="../../assets/image/fas fa-server.svg" alt=""> 个人动态
            </p>
            <p class="row-count">
                <span id="circlesCount"></span>
                <i class="iconfont icon-xiangyou1"></i>
            </p>
        </div>


        <!-- 运动数据 -->
        <div class="data-motion" id="dataMotion">
            <!-- 上运动数据 -->
            <div class="data">
                <p class="run">
                    <img src="../../assets/image/rundata.svg" alt=""> 运动数据
                </p>
                <p>
                    <i class="iconfont icon-xiangyou1"></i>
                </p>
            </div>
            <!-- 下总运动 -->
            <div class="motion">
                <!-- 总运动 -->
                <div class="total-motion">
                    <h6>总运动</h6>
                    <span id="duration">99999</span>分钟
                </div>
                <!-- 消耗 -->
                <div class="consume">
                    <h6>本周消耗</h6>
                    <span id="calorie">99999</span>千卡
                </div>
            </div>
        </div>


        <!-- 我的运动徽章 -->
        <div class="badges" id="badge">
            <!-- 上运动数据 -->
            <div class="data">
                <div class="run">
                    <img src="../../assets/image/badges.svg" alt="">
                    <i>M</i> 我的运动徽章
                </div>
                <div>
                    <b class="iconfont icon-xiangyou1"></b>
                </div>
            </div>
            <!-- 下徽章图片 -->
            <div class="badges-img">
                <img src="../../assets/image/mybadge01.jpg" alt="">
                <img src="../../assets/image/mybadge02.jpg" alt="">
                <img src="../../assets/image/mybadge03.jpg" alt="">
            </div>
        </div>
    </main>

</body>

</html>